0
263
ViewsMotivo: `object` ("[objeto Fecha]") no se puede serializar como JSON. Solo devuelva tipos de datos serializables JSON
Estoy usando prisma y Next.js. Cuando trato de recuperar el contenido de prisma en getStaticProps , obtiene los datos pero no puedo pasarlos al componente principal.
export const getStaticProps = async () => { const prisma = new PrismaClient(); const newsLetters = await prisma.newsLetters.findMany(); console.log(newsLetters); return { props: { newsLetters: newsLetters, }, }; };Como puede ver en esta imagen, está obteniendo e imprimiendo el contenido.
Pero cuando paso me sale el siguiente error por pasarlo como props
Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.3 answers
Answer question0
Parece que a nextJS no le gusta serializar nada más que tipos escalares por razones de rendimiento. Puedes leer más en este número de github . La mejor manera de manejar esto es convertir sus objetos de fecha a la marca de tiempo de UNIX antes de devolverlos.
// your data let newsLetters = [ { id: 'your-id', email: 'email@example.com', createdAt: new Date() } ]; // map the array newsLetters.map(x => { x.createdAt = Math.floor(x.createdAt / 1000); return x; }) // use newsLetters now console.log(newsLetters);0
De acuerdo con NextJS API Docs getStaticProps return "debe ser un objeto serializable para que cualquier accesorio pasado pueda serializarse con JSON.stringify".
Bajo el capó, permiten booleanos, números, cadenas y cualquier cosa que pase la prueba Lodash isPlainObject. https://lodash.com/docs/#isPlainObjectChecks . En la documentación de Lodash para esta función, afirma "Comprueba si el valor es un objeto simple, es decir, un objeto creado por el constructor de objetos o uno con un [[Prototipo]] de nulo".
La siguiente publicación de la pila analiza la diferencia. ¿La diferencia entre objeto y objeto simple en JavaScript?
Sobre la base de la respuesta de @Viktor Kynchev, según lo que necesite del accesorio, puede convertirlo en una cadena, un número o algún otro tipo aceptado por isPlainObject de Lodash.
Para mí, tenía un objeto de fecha proporcionado a través de Prisma API como OP, y simplemente lo convertí en una cadena como esa.
for (const element of newsLetters) { element.createdAt = element.createdAt.toString() }0
Si usa TypeScript , no puede cambiar el tipo de createdAt a una cadena o número, como este:
newsLetter.createdAt = newsLetter.createdAt.toString(); // Error: Type 'string' is not assignable to type 'Date'.en su lugar, puede usar JOSN.stringfy dentro de JSON.parse para crear un objeto serializable:
export const getStaticProps = async () => { const prisma = new PrismaClient(); const newsLetters = await prisma.newsLetters.findMany(); return { props: { newsLetters: JSON.parse(JSON.stringify(newsLetters)) // <=== } } }